<template>
  <van-loading v-if="loading" style="display:flex;align-items:center;justify-content:center;height:80vh" size="24px" vertical>加载中...
  </van-loading>
  <div v-else>
    <van-divider>队伍信息</van-divider>
    <van-card
        :desc="`介绍：${teamMember.teamDescription}`"
        :title="`名称：${teamMember.teamName}`"
    >
      <template #tags>
        类型：
        <van-tag style="margin: 10px 10px 10px 0" plain :type="teamMember.teamStatus === 0 ? 'success' : 'danger'">
          {{ teamMember.teamStatus === 0 ? '公开' : teamMember.teamStatus === 1 ? '加密' : null }}
        </van-tag>
      </template>
      <template #bottom>
        <p>{{ `人数：${currentNum}/${teamMember.maxNum}` }}</p>
        <p>{{ `截止时间：${new Date(teamMember.expireTime).toLocaleString()}` }}</p>
      </template>
    </van-card>
    <van-divider>队员列表</van-divider>
    <user-list :user-list="teamMember.members"/>
  </div>
</template>

<script setup lang="ts">
import myAxios from "../plugins/myAxios.ts";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import UserList from "../components/UserList.vue";

const currentNum = ref(0);
const loading = ref(true);
const teamMember = ref<{}>([]);
const route = useRoute();
const teamId = route.query.teamId;
onMounted(() => {
  if (teamId) {
    getTeamMember();
  }
});
const getTeamMember = async () => {
  const response = await myAxios.post('/team-manage/member', {
    id: teamId
  });
  loading.value = false;
  if (response.data) {
    teamMember.value = response.data;
    teamMember.value.members.forEach(item => {
      item.tags = JSON.parse(item.tags);
    });
    currentNum.value = response.data.members.length;
  }
};
</script>
